<template>
  <div class="goods-list">
    <!-- 左侧详情列表 -->
    <div class="list-f" ref="listLeft">
      <ul>
        <li
          :class="curStr === item.name ? 'active' : ''"
          v-for="item in goodsList"
          :key="item.name"
          @click="changeCur(item.name)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <!-- 右侧详情列表 -->
    <div class="list-r" ref="listRight">
      <ul>
        <li
          class="dr"
          v-for="item in goodsList"
          :key="item.name"
          :id="item.name"
        >
          <h3>{{ item.name }}</h3>
          <ul>
            <li v-for="sub in item.foods" :key="sub.id" class="list-item">
              <img :src="sub.imgUrl" alt="" @click="showDetail(sub)" />
              <div>
                <h4 @click="showDetail(sub)">{{ sub.name }}</h4>
                <p>{{ sub.goodsDesc }}</p>
                <p>
                  <span>月售{{ sub.sellCount }}份</span>
                  <span>好评率{{ sub.rating }}%</span>
                </p>
                <div class="price">
                  <span><small>￥</small>{{ sub.price }}</span>
                  <span><small>￥</small>{{ sub.price + 10 }}</span>
                </div>
                <van-stepper
                  :class="sub.num ? 'showNum' : ''"
                  v-model="sub.num"
                  theme="round"
                  button-size="22"
                  min="0"
                  disable-input
                  :show-minus="Boolean(sub.num)"
                />
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- 显示遮罩层 -->
    <div>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="goods-detail">
            <Detail :sonData="curDetail" @closeMask="show = false" />
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BetterScroll from 'better-scroll'
import Detail from './componets/detail.vue'

export default {
  components: {
    Detail
  },
  data() {
    return {
      curStr: '',
      rightObj: {},
      rangeArr: [],
      show: false,
      curDetail: {}
    }
  },
  computed: {
    ...mapState(['goodsList'])
  },
  mounted() {
    setTimeout(() => {
      // console.log(this.rangeArr)
      this.setRange()
      //  设置滚动条实例
      this.setObj()
      // console.log(rightObj)
    }, 1000)
  },
  methods: {
    changeCur(s) {
      // 当点击左侧菜单的时候不仅要高亮，还要让右侧的盒子滑动
      this.curStr = s
      const box = document.getElementById(s)
      this.rightObj.scrollToElement(box, 1000)
    },
    setRange() {
      this.curStr = this.goodsList[0].name
      let total = 0
      this.goodsList.forEach(item => {
        // console.log(document.getElementById(item.name))

        const tarHeight = document.getElementById(item.name).offsetHeight
        this.rangeArr.push({
          min: total,
          max: total + tarHeight,
          name: item.name
        })
        total = total + tarHeight
      })
    },
    // 设置滚动实例
    setObj() {
      const leftObj = new BetterScroll(this.$refs.listLeft, {
        click: true
      })
      console.log(leftObj)
      // 右侧实例

      this.rightObj = new BetterScroll(this.$refs.listRight, {
        probeType: 3,
        click: true
      })
      // 注册滑动事件
      this.rightObj.on('scroll', ({ y }) => {
        // 取绝对值
        y = Math.abs(y)
        // console.log(y)
        for (const v of this.rangeArr) {
          if (y >= v.min && y <= v.max) {
            this.curStr = v.name
          }
        }
      })
    },
    showDetail(item) {
      this.curDetail = item
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  position: relative;
  z-index: 1000;
  display: flex;
  height: 100%;
  overflow: hidden;
  .list-f {
    height: 100%;
    width: 110px;
    // background-color: red;

    li {
      padding: 0 15px;
      span {
        display: block;
        border-bottom: 1px solid #e4e4e4;
        padding: 15px 0;
        color: #666;
        font-size: 14px;
      }
      &.active {
        background-color: #fff;
        span {
          color: #f80;
        }
      }
    }
  }
  .list-r {
    flex: 1;

    .dr {
      font-size: 14px;
    }
    > ul {
      padding-bottom: 200px;
      // padding: 25px;
      li {
        ul {
          li {
            display: flex;
          }
        }

        .list-item {
          margin-bottom: 20px;
          position: relative;
        }
        div {
          padding-left: 10px;
        }
        h4 {
          font-size: 14px;
        }
        p {
          font-size: 12px;
        }
        .price {
          font-size: 12px;
        }
        img {
          width: 70px;
          height: 70px;
          margin-right: 10px;
          border: 1px solid #f8f8f8;
        }
        span {
          text-align: center;
        }
        //步进器
        .van-stepper {
          position: absolute;
          right: 10px;
          bottom: 13px;
          &.showNum {
            /deep/input {
              //显示
              visibility: visible;
            }
          }
          /deep/.van-stepper__plus {
            color: #00b5fd;
            background-color: #00b5fd;
          }
          /deep/input {
            visibility: hidden;
          }
          /deep/.van-stepper__minus {
            color: #0080b3c7;
            border-color: #0080b3c7;
          }
        }
      }
    }
  }
}
.goods-detail {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
